<template>
	<view class="login">
		<u-navbar class="nav-bar" title="登录" bgColor="transparent" @leftClick="leftClickFun">
		</u-navbar>
		<!-- <view class="navbar-title">登录</view> -->
		<view class="login-box">
			<view class="login-logo">
				<image class="logo-img" :src="localIconSrc('logo.png')"></image>
				<view class="login-text">爱云艺</view>
			</view>
			<view v-if="!verify">
				<view class="weixin" @click="goPhoneLogin">一键登录</view>
				<button class="account" @click="goAccountLogin">账号登录</button>
			</view>
			<view class="verify" v-else>
				<button class="verify-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击绑定手机号</button>
			</view>
			<view class="agreeBtn">
				<checkbox-group @change.stop="handleChange">
					<checkbox class="round red" :checked="checked">
					</checkbox>
				</checkbox-group>
				<view style="margin-left: 10rpx;" @click="handleChange">
					同意
					<text style="color: #47ACF5;" @click.stop="toPrivacy">《用户协议》</text>
					和
					<text style="color: #47ACF5;" @click.stop="toPrivacy">《隐私政策》</text>
				</view>
			</view>
		</view>
		<view class="occupy">
			<u-modal :show="showOccupy" :showConfirmButton="false">
				<view class="slot-content">
					<view class="info-icon">
						<u-icon name="close-circle" size="30"></u-icon>
					</view>
					<view class="phone-text">当前手机号{{ phoneNumber }}被占用</view>
					<!-- <view class="tips">
						如果有误请点击返回，如果已注册有账户可以通过绑定已有账户完成绑定。
					</view> -->
					<view class="occupy-btn">
						<view class="occupy-cancle" @click="handleCancle">取消</view>
						<view class="occupy-ok" @click="handleOk">绑定已有账号</view>
						<!-- <u-button style="margin-right: 20rpx; width: 100rpx;" color="#FF6005" size="small" :plain="true" shape="circle" text="取消" @click="handleCancle"></u-button>
						<u-button color="#FF6005" type="warning" size="small"  shape="circle" text="绑定已有账号" @click="handleOk"></u-button> -->
					</view>
				</view>
			</u-modal>
		</view>
	</view> 
</template>

<script>
	import { login, bindPhone } from '@/api/login.js'
	export default {
		data() {
			return {
				agreeFile: false,
				verify: false,
				showOccupy: false,
				phoneNumber: '',
				checked: false
			}
		},
		onLoad() {
		},
		onShow() {
			this.checked = false
		},
		methods: {
			// 点击同意用户协议
			handleChange(e) {
				console.log('this.checke', this.checked, e)
				this.checked = !this.checked
			},
			leftClickFun(){
				uni.switchTab({
					url:"/pages/home/index"
				})
			},
			// 账号登录
			goAccountLogin() {
				if(!this.checked) {
					uni.showToast({
						title: '请先阅读并勾选用户协议',
						icon: 'none'
					});
					return
				}
				uni.navigateTo({
					url: '/pages/login/accountLogin',
				});
			},
			// 微信一键登录
			async goPhoneLogin() {
				if(!this.checked) {
					uni.showToast({
						title: '请先阅读并勾选用户协议',
						icon: 'none'
					});
					return
				}
				const logininfo = await login()
				if (logininfo.is_binding_mobile === '0') {
					this.verify = true;
				}
				// 跳转到手机号登录页面
				// uni.navigateTo({
				// 	url: `/pages/login/phoneLogin?phoneNumber=${logininfo.mobile}`,
				// });
				// 跳转到首页
				// uni.switchTab({
				// 	url: `/pages/home/index`,
				// });
			},
			// 绑定手机号的函数
			getPhoneNumber (e) {
				if(!this.checked) {
					uni.showToast({
						title: '请先阅读并勾选用户协议',
						icon: 'none'
					});
					return
				}
				
				console.log(uni.getStorageSync('acctoken'))
				console.log(e.detail.code)  // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno)  // 错误码（失败时返回
				// 绑定失败或用户取消绑定
				if (e.detail.errno || !e.detail.code) {
					uni.navigateTo({
						url: `/pages/login/index`,
					});
				}
				let phoneStr = {
					"access_token": uni.getStorageSync('acctoken'),
					"wxid": 'gh_85adb5b7352f',
					"client_id": '073820240321128890',
					"code": e.detail.code
				}
				console.log('phoneStr', phoneStr)
				bindPhone(phoneStr).then(res => {
					const { phoneNumber, errcode } = res
					if(errcode == '200') {
						console.log('phoneNumber', phoneNumber)
						this.phoneNumber = phoneNumber;
						uni.switchTab({
							url: `/pages/home/index`,
						});
						// 如果手机号被占用弹出提示框
					} else if (errcode == '401012') {
						this.showOccupy = true;
					}
				})
			},
		  // 隐私政策
			toPrivacy() {
				uni.navigateTo({
					url: '/pages/privacyPage/privacyPage'
				})
			},
			handleCancle() {
				this.showOccupy = false;
			},
			handleOk() {
				this.showOccupy = false;
				uni.navigateTo({
					url: '/pages/login/authorize'
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		background-image: $login-bg2;
		background-size: 100vw 100vh;
		background-repeat: no-repeat;
		position: relative;
		.login-box {
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translate(-50%);
			width: 600upx;
			height: 666upx;
			.login-logo {
				margin-bottom: 120upx;
				text-align: center;
				.logo-img {
					width: 192upx;
					height: 192upx;
					text-align: center;
				}
			}
			.agreeBtn {
				text-align: center;
				color: #999;
				font-size: 26rpx;
				margin-top: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 24rpx;
				// border: 1px solid red;
				checkbox {
					border-radius: 50%;
				}
			}
		}
		.login-text {
			text-align: center;
			font-size: 44upx;
			// font-weight: bold;
			color: #ff6005;
		}
		.weixin {
			text-align: center;
			margin: 32upx 0;
			border-radius: 50rpx;
			background: #ff6005;
			color: #fff;
			border: 2rpx solid #ff6005;
			font-size: 32upx;
			font-weight: bold;
			height: 88rpx;
			line-height: 88rpx;
		}
		.account {
			border-radius: 50rpx;
			background: #fff;
			color: #ff6005;
			font-size: 32upx;
			border: 2upx solid #ff6005;
			font-weight: bold;
			height: 88rpx;
			line-height: 88rpx;
			// margin-bottom: 32upx;
		}
	}
	
	.navbar-title {
		font-size: 32upx;
		text-align: center;
		position: fixed;
		left: 50%;
		top: 5%;
		transform: translate(-50%);
	}
	.verify-btn {
		border-radius: 50rpx;
		background: #fff;
		color: #ff6005;
		font-size: 32upx;
		border: 2upx solid #ff6005;
		font-weight: bold;
	}
	
	.info-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.phone-text, .tips {
		text-align: center;
		font-size: #{$text-size};
		color: #{$one-title-color};
		margin: 20rpx 0;
	}
	.tips {
		
	}
	.occupy-btn {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 40rpx;
		margin-top: 60rpx;
		
		.occupy-cancle {
			color: #{$main-color};
			border: 1px solid #{$main-color};
			border-radius: 50rpx;
			padding: 10rpx 20rpx;
		}
		
		.occupy-ok {
			color: #fff;
			background-color: #FF6005;
			border-color: #FF6005;
			margin-left: 20rpx;
			border-radius: 450rpx;
			padding: 10rpx 20rpx;
		}
		
		// border: 1px solid red;
		// width: 600rpx;
		::v-deep .u-button--plain,::v-deep .u-button--circle,::v-deep .u-button--small {
			background: transparent;
			color: #{$main-color};
			border: 1px solid #{$main-color};
			border-radius: 20rpx;
			width: 180rpx;
		}
		
		::v-deep .u-button--warning {
			color: #fff;
			background-color: #FF6005;
			border-color: #FF6005;
			margin-left: 20rpx;
		}
	}
</style>